<template>
	<view>
		<uni-view class="search">
			<uni-view
				style="height: 54rpx ;border-radius: 38rpx;text-align: center;line-height: 54rpx;padding: 10rpx 15rpx;">
				<view class="u-demo-block__content">
					<view class="u-page__tag-item">
						<u-search :show-action="false" disabled="disabled" @change="change">
						</u-search>
					</view>
				</view>
			</uni-view>
		</uni-view>
		<!-- 分段器 -->
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0" class="shangpin">
				<view class="content-text" v-for="(item ,index) in test" :key="index" style="padding: 10rpx;">
					<image :src="item.url" style="width: 310rpx;height: 350rpx;"></image>
					<view class="tag-view" style="width:310rpx;">
						<text class="uni-h6"
							style="display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height: 45rpx;">
							<uni-tag style="margin-right: 15rpx;" text="京东商城" type="error" />
							{{item.text}}
						</text>
					</view>
				</view>
			</view>
			<view v-if="current === 1" class="shangpin">
				<view class="content-text" v-for="(item ,index) in test" :key="index" style="padding: 10rpx;">
					<image :src="item.url" style="width: 310rpx;height: 350rpx;"></image>
					<view class="tag-view" style="width:310rpx;">
						<text class="uni-h6"
							style="display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height: 45rpx;">
							<uni-tag style="margin-right: 15rpx;" text="京东商城" type="error" />
							{{item.text}}
						</text>
					</view>
				</view>
			</view>
			<view v-if="current === 2" class="shangpin">
				<view class="content-text" v-for="(item ,index) in test" :key="index" style="padding: 10rpx;">
					<image :src="item.url" style="width: 310rpx;height: 350rpx;"></image>
					<view class="tag-view" style="width:310rpx;">
						<text class="uni-h6"
							style="display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height: 45rpx;">
							<uni-tag style="margin-right: 15rpx;" text="京东商城" type="error" />
							{{item.text}}
						</text>
					</view>
				</view>
			</view>
			<view v-if="current === 3" class="shangpin">
				<view class="content-text" v-for="(item ,index) in test" :key="index" style="padding: 10rpx;">
					<image :src="item.url" style="width: 310rpx;height: 350rpx;"></image>
					<view class="tag-view" style="width:310rpx;">
						<text class="uni-h6"
							style="display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height: 45rpx;">
							<uni-tag style="margin-right: 15rpx;" text="京东商城" type="error" />
							{{item.text}}
						</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['综合', '新品', '商品', '价格'],
				current: 0,
				activeColor: 'red',
				test: [{
						url: '../../static/index-img/zsp01.jpg',
						text: '老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包'
					},
					{
						url: '../../static/index-img/zsp02.jpg',
						text: '老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包'
					},
					{
						url: '../../static/index-img/zsp03.jpg',
						text: '老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包'
					},
					{
						url: '../../static/index-img/zsp04.jpg',
						text: '老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包'
					},
					{
						url: '../../static/index-img/zsp05.png',
						text: '老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包'
					},
					{
						url: '../../static/index-img/zsp05.png',
						text: '老街口坚果礼盒 福年礼盒1678g/盒8袋每日坚果巴旦木核桃枣零食大礼包'
					}
				],
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		}
	}
</script>
<style lang="scss">
	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		/* #endif */
		height: 150px;
	}

	.content-text {
		font-size: 14px;
		color: #666;
		border: 1rpx solid #999;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.shangpin {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: initial;
		padding: 0 24rpx;
		margin-top: 30rpx;
	}
</style>
